<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="showAddDialog">添加</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="pageInfo.list" style="width: 100%">
                    <el-table-column prop="rid" label="ID" width="65px" />
                    <el-table-column prop="owner.oname" label="业主姓名" width="90px" />
                    <el-table-column prop="rtask" label="报修内容" width="100px" />
                    <el-table-column prop="rlocation" label="报修地点" width="180px" />
                    <el-table-column prop="rtime" label="报修时间" width="115px" />
                    <el-table-column prop="rcompleted" label="维修状态" width="95px">
                        <template #default="scope">
                            <el-tag type="primary" v-if="scope.row.rcompleted == 0">未完成</el-tag>
                            <el-tag type="info" v-else>已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="selectByrid(scope.row.rid)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top:20px ;">
                    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                        :page-size="pageInfo.pageSize" @change="selectByPageByOid" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!--添加报修任务对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加报修" width="500">
        <el-form>
            <el-form-item label="报修内容" label-width="20%">
                <el-input v-model="repairAdd.rtask" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="报修地点" label-width="20%">
                <el-input v-model="repairAdd.rlocation" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="报修时间" label-width="20%">
                <el-date-picker v-model="repairAdd.rtime" type="date" placeholder="请选择报修日期" format="YYYY-MM-DD"
                    style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加报修任务对话框结束 -->
    <!--修改报修任务对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改报修任务" width="500">
        <el-form>
            <el-form-item label="报修内容" label-width="20%">
                <el-input v-model="repairUpdate.rtask" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="报修地点" label-width="20%">
                <el-input v-model="repairUpdate.rlocation" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="报修时间" label-width="20%">
                <el-date-picker v-model="repairUpdate.rtime" type="date" placeholder="请选择入职日期" format="YYYY-MM-DD"
                    style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改报修任务对话框结束 -->
</template>

<script setup>
import ownerApi from '@/api/ownerApi';
import repairApi from '@/api/repairApi';
import loginApi from '@/api/loginApi';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';
const oid = ref();
const ownerList = ref([])
//用于分页
const pageInfo = ref({
    total: 0,
    pageSize: 0,
});
//被添加报修任务信息
const repairAdd = ref({
    oid:'',
    rtask: '',
    rlocation: '',
    rtime: '',
    rcompleted: 0,
});
const repairUpdate = ref({
    oid: '',
    rtask: '',
    rlocation: '',
    rtime: '',
    rcompleted: 0,
});
//用于部门列表
//用于添加报修任务对话框
const addDialogShow = ref(false);
const updateDialogShow = ref(false);

function selectByPageByOid(pageNum) {
    loginApi.select().then(resp=>{
        oid.value = resp.data.oid
    })
    repairApi.selectByPageByOid(pageNum, oid.value)
        .then(resp => {
            pageInfo.value = resp.data;
        });
}

function showAddDialog() {
    ownerApi.selectAll()
        .then(resp => {
            ownerList.value = resp.data;
            addDialogShow.value = true;
        })
}
//添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairApi.insert(repairAdd.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                addDialogShow.value = false;

                repairAdd.value = {
                    oid: '',
                    rtask: '',
                    rlocation: '',
                    rtime: '',
                    rcompleted: 0,
                }
                selectByPageByOid(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//删除
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairApi.update(repairUpdate.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;

                selectByPageByOid(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
function selectByrid(rid) {
    repairApi.selectByRid(rid)
        .then(resp => {
            repairUpdate.value = resp.data;
            ownerApi.selectAll()
                .then(resp => {
                    ownerList.value = resp.data;
                })
            updateDialogShow.value = true;
        });
}
//默认查询首页
selectByPageByOid(1);
</script>

<style scoped></style>